<template>
    <div class="ticket-list">
        <page-loading v-if="!isLoadDb"></page-loading>
        <div v-else class="ticket-cells">
           <ticket-cell class="ticket-cell" v-for="(dataItem, index) in goodsArr" :cellindex="index" :goods="dataItem" @click.native="cellClickHandle"></ticket-cell>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { formatDate } from "../../../common/js/date.js";
import ticketCell from "./ticketCell.vue";
import pageLoading from "../../loading/pageLoading.vue";

export default {
  name: "ticket-list",
  data() {
    return {
      isLoadDb: false,
      mealId: "",
      goodsArr: []
    };
  },
  components: {
    ticketCell,
    pageLoading
  },
  mounted() {
    this.mealId = this.$route.params.mealid;
    this.getTicketsData();
  },
  methods: {
    cellClickHandle(event) {
      if (this.role.toString() != "1") return;
      let curTarget = event.currentTarget;
      let cellIndex = curTarget.getAttribute("cellindex");
      let dataItem = this.goodsArr[cellIndex];
      if (dataItem.state.toString() != "0") return;
      let ticketInfo =
        this.mealId +
        "|" +
        dataItem.id +
        "|" +
        dataItem.names +
        "|123" +
        encodeURIComponent(dataItem.url);
      this.$router.push({
        path: "/ticketQcode",
        query: {
          mealId: this.mealId,
          ticketId: dataItem.id,
          ticketName: dataItem.names,
          icon: dataItem.url
        }
      });
    },
    getTicketsData() {
      this.$http
        .post(this.path + `store/Goods/getCoupon`, {
          buyid: this.mealId
        })
        .then(response => {
          this.setLoadDb();
          let serverData = response.body.result;
          serverData.forEach((val, index, arr) => {
            let tempDate = new Date(val.datefrom * 1000);
            let buyTime = formatDate(tempDate, "yyyy-MM-dd");
            tempDate = new Date(val.dateto * 1000);
            let endTime = formatDate(tempDate, "yyyy-MM-dd");
            let usetime = "";
            if (val.states.toString() == "1") {
              tempDate = new Date(val.consumedate * 1000);
              usetime = formatDate(tempDate, "yyyy-MM-dd");
            }
            this.goodsArr.push({
              id: val.cpid,
              names: val.cname,
              url: val.iconurl,
              starttm: buyTime,
              endtm: endTime,
              dec: val.message,
              state: val.states.toString(), //0代表未使用 1代表已使用 2代表已过期
              usetm: usetime
            });
          });
        });
    },
    setLoadDb() {
      if (this.isLoadDb) return;
      let clearId = setTimeout(() => {
        clearTimeout(clearId);
        this.isLoadDb = true;
      }, 200);
    }
  },
  computed: {
    ...mapState(["path", "userid", "role"])
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.ticket-list {
  width: 100%;
  min-height: 100%;
  background-color: #efefef;

  .ticket-cells {
    .ticket-cell {
      background-color: #fff;
      margin-bottom: 0.07rem;
      box-shadow: 0 1px 0px rgba(66, 73, 92, 0.1);
    }
  }
}
</style>
